<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="/res/css/manage/postList.css">
</head>
<body>
<header>
  <div class="row">
    <div class="col s6 header-left">
      <div class="hide-on-med-and-down">后台管理系统</div>
    </div>
  </div>
  <div class="container">


  </div>
  <ul id="nav-mobile" class="side-nav fixed" style="transform: translateX(0%);">
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">关于</a></li>
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">开始使用</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">颜色</a></li>
              <li><a href="javscript:;">Grid</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Badges</a></li>
              <li><a href="javscript:;">Buttons</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">展示</a></li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Carousel</a></li>
              <li><a href="javscript:;">Collapsible</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
  </ul>
</header>
<main>
  <div class="search-wrapper"></div>
  <div class="table-wrapper">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th data-field="id"></th>
            <th data-field="category">主题</th>
            <th data-field="title">标题</th>
            <th data-field="source">来源</th>
            <th data-field="tags">标签</th>
            <th data-field="view">浏览</th>
            <th data-field="state">状态</th>
            <th data-field="url">链接</th>
            <th data-field="time">时间(绿色新增,红色修改)</th>
            <th data-field="operator">操作</th>
          </tr>
        </thead>
        <tbody id="post_body"></tbody>
      </table>
    </div>
    <div class="pagination-wrapper">
      <ul class="pagination">
        <!--<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li class="active"><a href="#!">1</a></li>
        <li class="waves-effect"><a href="#!">2</a></li>
        <li class="waves-effect"><a href="#!">3</a></li>
        <li class="waves-effect"><a href="#!">4</a></li>
        <li class="waves-effect"><a href="#!">5</a></li>
        <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>-->
      </ul>
    </div>
  </div>
</main>
<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script src="/res/plugin/layer/layer.js"></script>
<script src="/res/javascript/fetch.js"></script>
<!--<script type="text/ecmascript-6">-->
<script>
  let pageObj = {
    page: 1,
    pageSize: 10,
  };
  $(function () {
    getDataByPage();
    $('#post_body').on('click', '.delete-btn', function (e) {
      e.preventDefault();
      let alias = $(this).attr('data-alias');
      console.log('删除:', alias);
      layer.confirm('你确定要删除该文章吗?', {
        btn: ['确定','取消'] //按钮
      }, function () {
        $fetch('/api/blog/post/'+alias, 'delete').then((result)=> {
            if(result.result===1){
              layer.alert('删除成功');
              getDataByPage();
            }else{
              layer.alert(result.msg);
            }
        }).catch((err)=> {
            layer.alert(err);
        });
      })
    });
    $('.pagination').on('click', 'li', function (e) {
      e.preventDefault();
      var $this = $(this);
      if($this.hasClass('disabled')){
        return false;
      }
      $this = $this.children('a');
      var icon = $this.children('i');
      if(icon.length>0){
        let iconName = icon.text();
        if(iconName==='chevron_left'){
          pageObj.page--;
        }else if(iconName==='chevron_right'){
          pageObj.page++;
        }else{
          console.error('该事件类型不存在,既不是上一页,也不是下一页');
        }
      }else{
        pageObj.page = parseInt($this.text());
      }
      getDataByPage();
    })
  });

  /**
   * 分页方法
   * @param page  当前页
   * @param flag  是否有下一页
   * @param maxPage   最大页数
   */
  function pagination(page = 1, flag = true, maxPage) {
    const CHEVRON_LEFT = '<li class="@CLASS"><a href="#!"><i class="material-icons">chevron_left</i></a></li>';   // disabled
    const CHEVRON_RIGHT = '<li class="@CLASS"><a href="#!"><i class="material-icons">chevron_right</i></a></li>'; // waves-effect
    const PAGE_CONTENT = '<li class="@CLASS"><a href="#!">@PAGE</a></li>';
    const MORE_CONTENT = '<li class="@CLASS"><a href="#!">...</a></li>';
    let content = '';
    if(!maxPage){
      maxPage = page;
    }
    if(page === 1){
      content = disable(CHEVRON_LEFT);
    }else{
      content = click(CHEVRON_LEFT);
    }

    if(page>4){   //如果大于4,则显示1,...,page-1,page
      content += click(PAGE_CONTENT, 1);
      content += disable(MORE_CONTENT);
      content += click(PAGE_CONTENT, page-2);
      content += click(PAGE_CONTENT, page-1);
      content += active(PAGE_CONTENT, page);
    }else{      //如果小于等于4,则显示1,2,3,4这样的格式
      for(let i=1;i<=page;i++){
        if(i===page){
          content += active(PAGE_CONTENT, i);
        }else{
          content += click(PAGE_CONTENT, i);
        }
      }
    }
    if(flag){
      content += click(PAGE_CONTENT, page+1);
      if(maxPage>page+4){
        content += click(PAGE_CONTENT, page+2);
        content += disable(MORE_CONTENT);
        content += click(PAGE_CONTENT, maxPage);
      }else if(maxPage>page+1){
        for(let i=page+1;i<=maxPage;i++){
          content += click(PAGE_CONTENT, i);
        }
      }else{
        content += disable(MORE_CONTENT);
      }
      content += click(CHEVRON_RIGHT);
    }else{
      content += disable(CHEVRON_RIGHT);
    }
    $('.pagination').html(content);
    function disable(content, page) {
      if(page){
        content = content.replace(/@PAGE/g, page);
      }
      return content.replace(/@CLASS/g, 'disabled');
    }
    function click(content, page) {
      if(page){
        content = content.replace(/@PAGE/g, page);
      }
      return content.replace(/@CLASS/g, 'waves-effect');
    }
    function active(content, page) {
      return content.replace(/@PAGE/g, page).replace(/@CLASS/g, 'active');
    }
  }
  
  function getDataByPage() {
    const uri = '/api/blog/post?';
    let url = uri+urlEnCode(pageObj);
    $fetch(url, 'get').then((result)=>{
      if(result.result===1){
        pageObj.page = result.data.page;
        pageObj.pageSize = result.data.pageSize;
        if(Array.isArray(result.data.data)){
          if(result.data.data.length===result.data.pageSize){
            pagination(pageObj.page, true);
          }else{
            pagination(pageObj.page, false);
          }
          let html = '';
          result.data.data.forEach((item)=>{
            html += `
            <tr data-alias="${item['alias']}">
              <td></td>
              <td>${item['categoryId']['cateName']}</td>
              <td>${item['title']}</td>
              <td>${item['source']}</td>
              <td>${item['labels'].map((item)=>  '<div class="chip">'+item+'</div>').join('')}</td>
              <td>${item['viewCount']}</td>
              <td>${item['isSecret']?'私密':'公开'}</td>
              <td>${item['url']?'<a href="'+item['url']+'" target="_blank">链接</a>':''}</td>
              <td>${item['createTime']===item['updateTime']?'<span class="green lighten-1">'+item['createTime']+'</span>':'<span class="red accent-2">'+item['updateTime']+'</span>'}</td>
              <td><a href="/res/html/manage/postEdit.html?alias=${item['alias']}">修改</a></td>
              <td><button type="button" class="delete-btn" data-alias="${item['alias']}">删除</button></td>
            </tr>
            `;
          });
          $('#post_body').html(html);
        }
      }else{
        console.log(JSON.stringify(result))
        layer.alert(result.msg);
      }
    }).catch((err)=>{
      layer.alert(err);
      console.error('获取服务器数据出错:', err);
    });
  }
</script>
</body>
</html>